<template>
  <div class="modern-product-card" @click="handleClick">
    <div class="product-tags" v-if="showTags">
      <span class="tag new" v-if="isNew">新品</span>
      <span class="tag discount" v-if="product.isDiscount">
        {{ getDiscountPercent }}% 折扣
      </span>
      <span class="tag low-stock" v-if="product.stock < 10 && product.stock > 0">
        库存紧张
      </span>
      <span class="tag sold-out" v-if="product.stock <= 0">
        已售罄
      </span>
    </div>

    <div class="product-image-container">
      <el-image 
        :src="product.imageUrl ? 'api' + product.imageUrl : ''" 
        fit="cover"
        class="product-image"
      >
        <div slot="error" class="image-placeholder">
          <i class="el-icon-picture-outline"></i>
        </div>
      </el-image>
      <div class="image-overlay">
        <div class="overlay-buttons">
          <el-button 
            size="small" 
            circle
            class="overlay-button"
            @click.stop="addToCart"
            :disabled="product.stock <= 0"
          >
            <i class="el-icon-shopping-cart-2"></i>
          </el-button>
          <el-button 
            size="small" 
            circle
            class="overlay-button"
            @click.stop="addToFavorite"
          >
            <i class="el-icon-star-off"></i>
          </el-button>
          <el-button 
            size="small" 
            circle
            class="overlay-button"
            @click.stop="quickView"
          >
            <i class="el-icon-view"></i>
          </el-button>
        </div>
      </div>
    </div>

    <div class="product-content">
      <div class="product-category">{{ product.categoryName || '农产品' }}</div>
      <h3 class="product-name">{{ product.name }}</h3>
      
      <div class="product-rating">
        <div class="stars">
          <i class="el-icon-star-on" v-for="i in Math.floor(rating)" :key="'full-'+i"></i>
          <i class="el-icon-star-half" v-if="rating % 1 >= 0.5"></i>
          <i class="el-icon-star-off" v-for="i in (5 - Math.ceil(rating))" :key="'empty-'+i"></i>
        </div>
        <span class="rating-count">({{ salesCount }})</span>
      </div>
      
      <div class="product-price">
        <span class="current-price" :class="{ 'discount-price': product.isDiscount }">
          ¥{{ product.isDiscount ? product.discountPrice : product.price }}
        </span>
        <span class="original-price" v-if="product.isDiscount">
          ¥{{ product.price }}
        </span>
      </div>
    </div>

    <div class="product-footer">
      <el-button 
        type="success" 
        size="small" 
        class="view-details-btn"
        @click.stop="viewDetails"
      >
        查看详情
        <i class="el-icon-arrow-right"></i>
      </el-button>
      
      <el-button 
        type="success" 
        size="small" 
        plain
        class="add-cart-btn"
        @click.stop="addToCart"
        :disabled="product.stock <= 0"
      >
        {{ product.stock > 0 ? '加入购物车' : '缺货' }}
        <i class="el-icon-shopping-cart-2" v-if="product.stock > 0"></i>
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ProductCard',
  props: {
    product: {
      type: Object,
      required: true
    },
    showTags: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      // 模拟评分数据，实际应从API获取
      rating: this.generateRandomRating(),
      salesCount: this.product.salesCount || Math.floor(Math.random() * 100) + 5
    }
  },
  computed: {
    isNew() {
      // 假设产品在30天内为新品
      if (!this.product.createTime) return false
      const createTime = new Date(this.product.createTime)
      const now = new Date()
      const diffTime = Math.abs(now - createTime)
      const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
      return diffDays <= 30
    },
    getDiscountPercent() {
      if (!this.product.isDiscount) return 0
      const discount = Math.round(100 - (this.product.discountPrice / this.product.price * 100))
      return discount
    }
  },
  methods: {
    generateRandomRating() {
      // 生成3.0-5.0之间的随机评分
      return (Math.random() * 2 + 3).toFixed(1)
    },
    handleClick() {
      this.viewDetails()
    },
    viewDetails() {
      this.$router.push(`/product/${this.product.id}`)
    },
    addToCart() {
      if (this.product.stock <= 0) return
      this.$emit('add-to-cart', this.product)
      this.$message({
        message: '已添加到购物车',
        type: 'success',
        duration: 1500
      })
    },
    addToFavorite() {
      this.$emit('add-to-favorite', this.product)
      this.$message({
        message: '已添加到收藏夹',
        type: 'success',
        duration: 1500
      })
    },
    quickView() {
      this.$emit('quick-view', this.product)
    }
  }
}
</script>

<style scoped>
.modern-product-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid #f0f0f0;
  cursor: pointer;
}

.modern-product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(76, 175, 80, 0.15);
  border-color: #4caf50;
}

.product-tags {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.tag {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  color: white;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.tag.new {
  background: #4caf50;
}

.tag.discount {
  background: #ff9800;
}

.tag.low-stock {
  background: #f44336;
}

.tag.sold-out {
  background: #9e9e9e;
}

.product-image-container {
  position: relative;
  height: 0;
  padding-bottom: 100%; /* 1:1 宽高比 */
  overflow: hidden;
}

.product-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease;
}

.modern-product-card:hover .product-image {
  transform: scale(1.05);
}

.image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #f5f5f5;
  color: #ddd;
  font-size: 30px;
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modern-product-card:hover .image-overlay {
  opacity: 1;
}

.overlay-buttons {
  display: flex;
  gap: 10px;
}

.overlay-button {
  background: white;
  color: #333;
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.overlay-button:hover {
  background: #4caf50;
  color: white;
  transform: translateY(-3px);
}

.overlay-button:disabled {
  background: #f5f5f5;
  color: #ccc;
  cursor: not-allowed;
}

.product-content {
  padding: 15px;
  flex-grow: 1;
}

.product-category {
  color: #757575;
  font-size: 12px;
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.product-name {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 10px;
  color: #333;
  line-height: 1.4;
  height: 44px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.product-rating {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.stars {
  display: flex;
  color: #ffc107;
  margin-right: 5px;
}

.rating-count {
  color: #757575;
  font-size: 12px;
}

.product-price {
  display: flex;
  align-items: center;
  gap: 8px;
}

.current-price {
  font-size: 18px;
  font-weight: 700;
  color: #333;
}

.discount-price {
  color: #f44336;
}

.original-price {
  font-size: 14px;
  color: #9e9e9e;
  text-decoration: line-through;
}

.product-footer {
  padding: 15px;
  display: flex;
  gap: 10px;
  border-top: 1px solid #f0f0f0;
}

.view-details-btn, .add-cart-btn {
  flex: 1;
  border-radius: 6px;
  font-size: 13px;
  padding: 8px 0;
}

.view-details-btn {
  background: #4caf50;
  border-color: #4caf50;
}

.view-details-btn:hover {
  background: #43a047;
  border-color: #43a047;
}

.add-cart-btn {
  border-color: #4caf50;
  color: #4caf50;
}

.add-cart-btn:hover {
  color: white;
  background-color: #4caf50;
}

.add-cart-btn:disabled {
  color: #ccc;
  border-color: #ddd;
  background-color: #f5f5f5;
}

@media (max-width: 768px) {
  .product-name {
    font-size: 14px;
    height: 40px;
  }
  
  .product-footer {
    flex-direction: column;
  }
  
  .overlay-buttons {
    gap: 5px;
  }
  
  .overlay-button {
    transform: scale(0.9);
  }
}
</style> 